<script setup lang="ts">
defineOptions({
  name: 'ContainerMask',
  inheritAttrs: true,
})
defineEmits<{
  click: []
}>()
</script>

<template>
  <div class="block-left-mask" @click="$emit('click')">
    <i class="i-ant-design:edit-outlined cursor-pointer w-4 h-4 block" />
    <span class="cursor-pointer">更换</span>
  </div>
</template>

<style lang="less" scoped>
// 父元素要做的事情: 父元素hover时 让其opacity为1即可
.block-left-mask {
    background: rgba(0, 0, 0, 0.6);
    @apply absolute transition transition-opacity opacity-0 left-0 right-0 top-0 bottom-0 flex flex-col justify-center items-center gap-1 text-sm text-white;
}
</style>
